.my-medal {
  padding-left: 20px;
  height: 710px;
  color: #666;
  background: #242948;
  .my-medal-content {
    width: 760px;
    height: 710px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    .medal-header {
      position: relative;
      margin-bottom: 30px;
      >span {
        display: block;
        width: 108px;
        height: 96px;
        background: url(../../../../images/student/my_medal.png) no-repeat;
        position: relative;
        z-index: 2;
        background-size: cover;
      }
      p {
        width: 550px;
        height: 36px;
        line-height: 36px;
        background: #ffe5a6;
        padding-left: 56px;
        color: #333;
        font-size: 18px;
        position: relative;
        z-index: 1;
        bottom: 10px;
      }
    }
    .medal-content {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      >div {
        span {
          display: block;
          width: 163px;
          height: 147px;
          margin-bottom: 20px;
          &.superman {
            background: url(../../../../images/student/superman.png) no-repeat;
          }
          &.little-expert {
            background: url(../../../../images/student/little_expert.png) no-repeat;
          }
          &.keep-on-fighting {
            background: url(../../../../images/student/keep_on_fighting.png) no-repeat;
          }
        }
        b {
          display: inline-block;
          width: 100%;
          font-weight: normal;
          text-align: center;
          font-size: 18px;
        }
      }
    }
  }
}